<template>
  <div class="car_index__container">
    <x-header :left-options="{showBack: false}">
      <icon slot="left" type="icon-fanhui" size="2.5" @click.native="onClickBack"/>
      {{ handleUserCarTitle }}
      <icon slot="right" type="iconfont icon-kefu" size="2" @click.native="onClickService"/>
    </x-header>
    <div ref="mapContainer" class="map-container"></div>
    <car-start-address-end/>
    <div class="page__container" v-show="handlePageRouter">
      <transition name="fade">
        <router-view/>
      </transition>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapMutations, mapGetters} from 'vuex'
import CarStartAddressEnd from './modules/car-start-address-end/car-start-address-end';
import { XHeader, PopupPicker, Datetime } from 'vux'
import ZT_AMap from 'utils/amap'
import * as util from 'utils/utils'
import '../assets/css/index.styl'
import { car } from '../data'
let a_map = null;
export default {
  components: { XHeader, PopupPicker, Datetime, CarStartAddressEnd },
  data: function () {
    return {
      userCarType: true,
      pickerValue: [],
      headerTitle: '',
      dateTimeVisible: false,
      popupPickerData: [],
      popupPickerValue: [],
      userCarTime: '',
      fromPlace: {
        name: ''
      },
      toPlace: {}
    }
  },
  mounted () {
    // this.isHaveTravel();
    this.popupPickerData = util.generatePopupTimeDate(); // 生成预约时间数据
    this._initMap();
  },
  computed: {
    ...mapGetters([
      'handleUserCarTitle'
    ]),
    handlePageRouter () {
      if (this.$route.name === 'carIndex') {
        return false
      }
      return true
    }
  },
  methods: {
    ...mapMutations([
      'SET_GEOLOCALTION_STATE',
      'SET_USER_CAR_TITLE'
    ]),
    // 进入用车首页时判断是否有没完成的行程
    isHaveTravel () {
      let self = this;
      if (self.handlePageRouter) return false;
      car.getUnderWayTrip({}).then((res) => {
        if (res.code === 0) {
          this.$vux.alert.show({
            content: `${res.data.message}`,
            buttonText: `${res.data.btn}`,
            onHide () {
              self.$router.push(`/carIndex/orderDetail/${res.data.orderId}`)
            }
          })
        }
      });
    },
    // 点击客服电话
    onClickService () {
      this.$router.push('/mypage2')
    },
    onClickBack () {
      if (!this.handlePageRouter) {
        $jump.home()
      } else {
        this.$router.back()
      }
    },
    // 获取定位数据后处理
    _getGeolocation () {
      a_map.getGeolocation().then(res => {
        if (res.type === 'complete') {
          this.SET_GEOLOCALTION_STATE('SUCCESS');
          this._getCityIdFn(res);
        } else {
          this.SET_GEOLOCALTION_STATE('FAIL');
          this.$vux.toast.show({
            time: 1000,
            type: 'warn',
            text: '定位失败请手动设置',
            position: 'middle'
          });
        }
      }, err => {
        this.SET_GEOLOCALTION_STATE('FAIL');
        console.log('定位错误')
      });
    },
    // 获取出发地和目的地的城市id
    _getCityIdFn (data) {
      car.getCityId({
        cityName: data.addressComponent.province
      }).then(res => {
        if (res.data.code === 0) {
          let obj = {
            cityId: res.data.data,
            cityName: data.addressComponent.province,
            address: data.addressComponent.township,
            addressDetail: `${data.addressComponent.street}${data.addressComponent.streetNumber}`,
            longitude: data.position.lng,
            latitude: data.position.lat
          };
          this.$store.commit('SET_USER_CAR_START_ADDRESS', obj)
        } else {
          this.$vux.toast.show({
            time: 1000,
            type: 'warn',
            text: res.data.data.msg,
            position: 'middle'
          })
        }
      }, fail => {
        console.log(fail)
      })
    },
    _initMap () {
      ZT_AMap.init().then(() => {
        a_map = new ZT_AMap(this.$refs.mapContainer);
        this._getGeolocation();
      });
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.meta.title) {
        vm.SET_USER_CAR_TITLE(to.meta.title);
      }
    })
  },
  beforeRouteUpdate (to, from, next) {
    this.SET_USER_CAR_TITLE(to.meta.title);
    next()
  }
}
</script>

<style lang="stylus" type="text/stylus">
  @import "~assets/css/theme"

  .car_index__container
    width 100%
    height 100%
    overflow: hidden
    background $sl_theme_bg
    .vux-header
      height 4 * 0.61rem
      position relative
      z-index 1
      background $sl_theme_title
      padding 0
      .vux-header-title
        height 4 * 0.61rem
        line-height 4 * 0.61rem
        font-size $sl_font_size_16
      .vux-header-left, .vux-header-right
        color #fff
        top 55%
        transform translateY(-50%)
        .left-arrow
          font-size $sl_font_size_16
    .mint-popup
      width 100%
      .sl__nav
        display flex
        justify-content space-between
        font-size $sl_font_size_14
        color $sl_font_color_desc
        border-bottom 1px #f60 solid
        span
          padding 1.5 * .61rem 0
          &:nth-child(2)
            color #f60
    .picker-slot-center:nth-child(1), .picker-slot-center:nth-child(2)
      display none
    .page__container
      width 100%
      overflow hidden
      background $sl_theme_bg
      position: fixed
      left 0
      top 4 * .61rem
      bottom 0
      >div
        min-height 100%
        background $sl_theme_bg
    .map-container
      width 100%
      position absolute
      top 4 * .61rem
      bottom 0
      height auto
      .amap-geolocation-con
        display none
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }

  .vux-popup-dialog ul{
    background: white;
    li{
      width: 100%;
      line-height: 2rem;
      font-size: .75rem;
      box-sizing: border-box;
      padding: 0 1rem;
    }
    .active{
      color: #0994db;
    }
  }
</style>
